{% extends "templates/base.html" %}
 {% load static %}
{% block head %}
    <style>
    .good img {
    width: 100%; /* 或者你需要的任何初始宽度 */
    transition: transform 0.25s ease; /* 平滑过渡效果 */
}

.good:hover img {
    transform: scale(1.1); /* 鼠标悬停时放大10% */
}
    </style>
{% endblock %}
{% block content %}
    <div class="car-models"
         style="width: 20%;height: 900px;margin-left:50px;margin-top: 30px;">
        
        <h1 style="text-align: center;">品牌</h1>
        <div class="scroll-box">
            <ul id="myList">
                {% for model in models_list %}
                <li onclick="" style="margin: 30px;">
                    <a href="/car_model_all/{{ model.id }}/"><img src="/{{ model.logo  }}" style="width: 80px;height: 80px;margin-top: -15px"><span style="font-size:25px;margin-left:20px ">{{ model.mname }}</span></a>
                </li>
                {% endfor %}

            </ul>
        </div>


    </div>

    <div class="cars" style="width: 70%;height: 720px;background-color:#fafafa;margin-left: 25%;margin-top:-900px; ">
           <ul class="types" style="width: 100%;height: 30px;padding-bottom: 20px; background-color: #f2f2f2;">
                <li style="width: 10%;height: 100%;text-align: center;font-size: 25px;float: left;margin-left: -20px">车型:</li>
               {% for type in type_list %}
               <li style="width: 10%;height: 100%;text-align:center;font-size:23px;float: left;align-items: center; "><a href="/car_model_all/{{ m_id }}/type/{{ type.id }}/">{{ type.type_name }}</a></li>
               {% endfor %}
           </ul>
        <h2 style="width: 100%">已为您查找到<span style="color:red;">{{ carsnumber }}</span>款车型</h2>
       
    {% for car in cars_list %}
        <div class="good" style="width: 21%;height: 240px;margin: 20px;float: left">
                <a href="/car_model_all/cardetail/{{ car.id }}/"  class="car-info" >
                <div >
                    <img src="/{{ car.curl }}" width="100%">
                    <p title="秦PLUS" class="car-name" style="text-align: center;margin-top: 10px ">{{ car.cname }}</p>
                    <p class="car-price" style="text-align: center;color: red;margin-top: 10px">{{ car.price }}</p>
                </div>
                </a>

                <div class="btn-wrapper" style="padding-top: 20px">
                    {% if suser != none %}
                    <a href="javascript:;" class="buy"  data-carid="{{ car.id }}">
                        <div class="price-btn" style="width:100px;text-align:center;float: left;height: 30px;background-color: #75b798">
                        立即预约
                    </div>
                    </a>
                    {% else %}
                    <a href="javascript:;" class="yuyueNow">
                        <div class="price-btn" style="width:100px;text-align:center;float: left;height: 30px;background-color: #75b798">
                        立即预约
                    </div>
                    </a>
                    {% endif %}
                    <a  href="/car_model_all/cardetail/{{ car.id }}/" >
                        <div class="price" style="width:100px;text-align:center;float: left;height: 30px;background-color: #75b798;margin-left: 30px">
                        查看详情
                    </div>
                    </a>

                </div>

        </div>
    {% endfor %}
<div id="loginModal" class="modal">
  <div class="modal-content">
    <span class="close" style="color: #75b798">&times;</span>
    <p style="font-size: 15px;color: black">温馨提示：</p>
      <p style="font-size: 15px;color: black;padding-top: 10px">您还是没有登入，是否立即前往登入注册！</p>
    <a href="/login/" class="confirm-login" style="color: #75b798;width: 50%">确认</a>
    <a href="javascript:;" class="close" style="width:40%;color: #75b798;font-size: 14px"><p style="margin-top:-19px">取消</p></a>
  </div>
</div>

<div id="message-container" style="display:none; position:absolute; top:30%; right:40%; padding:10px; background-color:#75b798; border:1px solid black;"></div>

    </div>
{% endblock %}
{% block script %}
<script>
    $(document).ready(function () {
        $(".buy").click(function () {
            var carid = $(this).data('carid');
            $.ajax({
                url: '/reservation/add_reservation/' + carid + '/',
                type: 'GET',
                async:false,
                success: function (response) {
                    // 假设response.message是你要显示的消息
                    $('#message-container').text(response.message).show(); // 显示消息并设置文本

                    // 如果你想在一段时间后自动隐藏消息，可以添加以下代码
                    setTimeout(function () {
                        $('#message-container').hide(); // 隐藏消息容器
                        location.reload();
                    }, 1000); // 3秒后隐藏
                },
                error: function (xhr, status, error) {
                    // 处理错误情况
                    $('#message-container').text('发生错误: ' + error).show();
                    setTimeout(function () {
                        $('#message-container').hide();
                    }, 3000);
                }
            })
        })
    })
        $(document).ready(function () {
        // 点击购买按钮时显示模态框
        $(".yuyueNow").click(function () {
            $("#loginModal").css("display", "block");
        });

        // 点击关闭按钮或模态框外部时关闭模态框
        $(".close, #loginModal").click(function () {
            if ($(this).attr("id") != "loginModal") {
                // 防止点击模态框本身时关闭它
                return;
            }
            $("#loginModal").css("display", "none");
        });

        // 点击“确认”链接时跳转到登录页面
        $(".confirm-login").click(function (e) {
            e.preventDefault(); // 阻止链接的默认行为
            window.location.href = $(this).attr("href"); // 使用链接的href属性进行跳转
        });
    });
</script>
{% endblock %}